<script lang="ts" setup>
import { inject } from 'vue';

// inject(名字)
// 获取分隔符
const separtor = inject('separtor')

defineProps<{
  to?: string // 要跳转的位置
}>()
</script>
<template>
<div class="xtx-bread-item">
  <!-- 是否需要跳转 -->
  <router-link v-if="to" :to="to"><slot> </slot></router-link>
  <slot v-else> </slot>

  <!-- 分隔符从祖先来的 -->
  <i v-if="separtor">{{ separtor }}</i>
  <!-- 默认分隔符 -->
  <i v-else class="iconfont icon-angle-right"></i>
</div>
</template>

<style lang="less" scoped>
.xtx-bread-item {
  i {
    margin: 0 6px;
    font-size: 10px;
  }
  // 最后一个i隐藏
  &:nth-last-of-type(1) {
    i {
      display: none;
    }
  }
}
</style>